<template>
  <div class="content-wrapper">
    <div class="content-container">
      <div>
        <el-page-header
          v-if="title.length > 0"
          class="my-header"
          :content="title"
          @back="goBack"
        />
        <!-- <div class="filter-container">
          <span class="filter-item filter-item-label">批量操作 </span>
          <el-button
            size="mini"
            round
            class="filter-item"
            @click="batchDownload"
          >下载<i
            class="el-icon-download el-icon--right button-icon blue-color"
          /></el-button>
        </div> -->
        <el-table
          v-if="list"
          ref="tableData"
          v-loading="listLoading"
          class="tabel"
          height="650"
          :data="
            list.filter(
              (data) =>
                !search ||
                data.documentName.toLowerCase().includes(search.toLowerCase())
            )
          "
          highlight-current-row
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" fixed /> -->
          <el-table-column label="名称" min-width="200">
            <template slot-scope="scope">
              <span
                v-if="scope.row.folderName"
                style="cursor: pointer"
                @click="childFile(scope.row)"
                ><svg class="icon" aria-hidden="true">
                  <use :xlink:href="iconType(scope.row.fileExtension).class" />
                </svg>
                {{ scope.row.folderName }}</span
              >
              <span v-if="scope.row.documentName"
                ><svg class="icon" aria-hidden="true">
                  <use
                    :xlink:href="iconType(scope.row.fileExtension).class"
                  /></svg
                >{{ scope.row.documentName }}{{ scope.row.fileExtension }}
              </span>
            </template>
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入名称搜索"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="文件编号"
            sortable
            prop="documentCode"
            width="250px"
          />

          <el-table-column
            label="创建人"
            sortable
            prop="createdName"
            width="150px"
          />
          <el-table-column
            sortable
            label="最近使用时间"
            prop="accessTimeString"
            width="200px"
            align="center"
          />
          <el-table-column label="大小" sortable prop="size" width="100px" />
          <el-table-column
            label="操作"
            align="center"
            width="120px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-row>
                <el-col :span="24">
                  <el-dropdown trigger="click" class="filter-item">
                    <el-button type="text" class="el-icon-more" />
                    <el-dropdown-menu slot="dropdown" class="user-dropdown">
                      <el-dropdown-item
                        v-if="scope.row.documentName"
                        @click.native="viewDocument(scope.row, 'view')"
                        >预览</el-dropdown-item
                      >

                      <el-dropdown-item
                        v-if="scope.row.documentId"
                        @click.native="viewDocument(scope.row, 'edit')"
                        >编辑*</el-dropdown-item
                      >

                      <el-dropdown-item
                        v-if="scope.row.documentId"
                        @click.native="fileDownload(scope.row)"
                        >下载</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// import Pagination from '@/components/Pagination'
import { unity } from '@/styles/js/setIconType.js'
import { listFolder } from '@/api/fd/folder'
import { downloadFile } from '@/api/fd/document'

export default {
  // components: { Pagination },
  data() {
    return {
      iconType: unity.setIconType,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10
        // flowType: null,
        // documentCode: null
      },
      temp: {
        parentFolderId: null,
        folderName: null,
        folderId: null,
        repositoryId: 3
      },
      list: null,
      total: 0,
      listLoading: true,
      input: '',
      dialogVisible: false,
      search: '',
      title: '',
      multipleSelection: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    //   分页处理
    getList() {
      listFolder(this.temp).then((res) => {
        this.list = res.data
        this.listLoading = false
      })
    },
    childFile(row) {
      this.title = row.folderName
      this.temp.parentFolderId = Number(row.folderId)
      this.getList()
    },
    handleFilter() {},
    // edit
    openDocument(id) {
      window.open(
        'onlyoffice/createDocument.html?&token=' +
          this.$store.getters.token +
          '&documentId=' +
          id +
          '&mode=edit' +
          '&urldata=' +
          process.env.VUE_APP_BASE_API
      )
    },
    goBack() {
      this.temp = this.$options.data().temp
      console.log(this.temp, 'oooo')
      this.title = ''
      this.getList()
    },
    viewDocument(row, mode) {
      console.log(row, '73737')
      if (row.documentType !== 4) {
        window.open(
          'onlyoffice/createDocument.html?&token=' +
            this.$store.getters.token +
            '&documentId=' +
            row.documentId +
            '&mode=' +
            mode +
            '&urldata=' +
            process.env.VUE_APP_BASE_API
        )
      } else {
        window.open(
          process.env.VUE_APP_BASE_API +
            '/api/fd/pdf/get_document_by_pdf?documentId=' +
            row.documentId
        )
      }
    },
    // 下载功能
    fileDownload(row) {
      downloadFile({
        documentId: row.documentId
      }).then((res) => {
        const { url, documentName } = res.data
        this.getBlob(url).then((blob) => {
          this.saveAs(blob, documentName)
        })
      })
    },
    // 下载重命名
    getBlob(url) {
      return new Promise((resolve) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.responseType = 'blob'
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response)
          }
        }

        xhr.send()
      })
    },
    // 下载重命名
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename)
      } else {
        const link = document.createElement('a')
        const body = document.querySelector('body')

        link.href = window.URL.createObjectURL(blob)
        link.download = filename
        link.style.display = 'none'
        body.appendChild(link)
        link.click()
        body.removeChild(link)
        window.URL.revokeObjectURL(link.href)
        this.a = this.a + 1
        console.log(this.a)
      }
    },
    batchDownload() {
      this.batchType = 1
      if (this.multipleSelection.length > 0) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ;((t, data) => {
            setTimeout(() => {
              this.fileDownload(data)
            }, 1000 * t) // 每秒执行一次
          })(i, this.multipleSelection[i])
        }
      } else {
        this.$message.warning('请选择下载文件')
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scope >
.filter-container {
  padding-top: 5px;
}
</style>
